\n\npublic class fields syntax:
\n
handleClick = e => this.setState({[e.target.id]: e.target.value})\n\nrefs\nThe ref is used to return a reference to the element. They should be avoided in most cases.\n
\ncallback refs:
<input ref={node => this.node = node} onChange={} value={}>\n this.node.scrollIntoView()\n this.node.click()\n\nWhat are portals in React?
\n
Portal is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
\nReactDOM.createPortal(child, container)The first argument is any render-able React child, such as an element, string, or fragment. The second argument is a DOM element.
\n\n\nIs it possible to use React without rendering HTML?
\n
render() { return false; null; []; <></>; <React.Fragment></React.Fragment> }\n\nHow to focus an input element on page load?
\n
You can do it by creating ref for input element and using it in componentDidMount():
\nclass App extends React.Component{\n componentDidMount() {\n this.nameInput.focus()\n }\n\n render() {\n return (\n <div>\n <input defaultValue={'Won\\'t focus'} />\n <input ref={(input) => this.nameInput = input} defaultValue={'Will focus'} />\n </div>\n )\n }\n}\n\nWhat are the possible ways of updating objects in state?
\n
const user = Object.assign({}, this.state.user, { age: 42 })\n const user = { ...this.state.user, age: 42 }\n this.setState({ user })Calling setState() with a function:
\nthis.setState(prevState => ({\n user: {\n ...prevState.user,\n age: 42\n }\n}))\nthis.setState((prevState, props) => ({\n counter: prevState.counter + props.increment\n}))this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. The preferred approach is to call setState() with function rather than object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument.
\n\n\nHow to avoid using relative path imports in create-react-app?
\n
Create a file called .env in the project root and write the import path:
\nNODE_PATH=src/appAfter that restart the development server. Now you should be able to import anything inside src/app without relative paths.
\n\n\nWhat is React Fiber?
\n
Fiber is the new reconciliation engine or reimplementation of core algorithm in React v16. The goal of React Fiber is to increase its suitability for areas like animation, layout, gestures, ability to pause, abort, or reuse work and assign priority to different types of updates; and new concurrency primitives.\nIts headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.
\n\nWhat are controlled components?
\n
A component that controls the input elements within the forms on subsequent user input is called Controlled Component, i.e, every state mutation will have an associated handler function.\nFor example, to write all the names in uppercase letters, we use handleChange as below,
handleChange(event) {\n this.setState({value: event.target.value.toUpperCase()})\n}ref\n\nWhat are the different ways to write mapDispatchToProps()?
\n
There are a few ways of binding action creators to dispatch() in mapDispatchToProps(). Below are the possible options:
\nconst mapDispatchToProps = (dispatch) => ({\n action: () => dispatch(action())\n})\n\nconst mapDispatchToProps = (dispatch) => ({\n action: bindActionCreators(action, dispatch)\n})\nnode\nconst mapDispatchToProps = { action }\n\nHow to structure Redux top level directories?
\n
Most of the applications has several top-level directories as below:
\nComponents: Used for dumb components unaware of Redux.Containers: Used for smart components connected to Redux.Actions: Used for all action creators, where file names correspond to part of the app.Reducers: Used for all reducers, where files name correspond to state key.Store: Used for store initialization.This structure works well for small and medium size apps.
\n\n\nWhat are Redux selectors and why to use them?
\n
Selectors are functions that take Redux state as an argument and return some data to pass to the component.\nFor example, to get user details from the state:
\nconst getUserData = state => state.user.data\n\nHow
\nRelayis different from Redux?
Relay is similar to Redux in that they both use a single store. The main difference is that Relay only manages state originated from the server, and all access to the state is used via GraphQL queries (for reading data) and mutations (for changing data). Relay caches the data for you and optimizes data fetching for you, by fetching only changed data and nothing more.